<template>
  <div>
    <header class="app-header">
      <div @click="back" class="backRoute">
        <i class="iconfont icon-arrow-left-bold"></i>
      </div>
      历史记录
      <span class="clearHis" @click="clearAll">清除所有历史</span>
    </header>
    <div class="core-container">
      <div class="scroll-wrapper" ref="scroll">
        <div class="scroll-content">
          <div class="scroll-item" v-for="(item, index) in hd" :key="index" @click="clickPush(item)">{{item.title}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  methods: {
    async clearAll () {
      await this.deleteAllHistory()
      // this.$router.go(0)
      this.$toast('删除成功', 1500)
      await this.getMsbdByHistory()
    },
    back () {
      this.$router.back()
    },
    ...mapActions('setting', ['getHistory', 'getMsbdByHistory', 'deleteAllHistory']),
  },
  async mounted () {
    await this.getHistory()
    await this.getMsbdByHistory()
  },
  computed: {
    ...mapState('setting', ['historyData', 'hd'])
  }
}
</script>

<style scoped>
.backRoute {
  position: absolute;
  left: 17px;
  width: 60px;
}

.core-container .scroll-wrapper {
  height: calc(100vh - 60px);
  overflow: hidden;
}
.core-container .scroll-wrapper .scroll-item {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-bottom: 1px solid #eee;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-indent: 10px;
  border-bottom: 1px solid #ccc;
  width: 100%;
  margin: auto;
  position: relative;
}

.core-container .scroll-wrapper .scroll-item .study {
  color: #999999;
}

.core-container .scroll-wrapper .scroll-item {
  background-color: #f3f5f7;
}

.clearHis {
  position: absolute;
  right: 15px;
  font-size: 12px;
  color: #ccc;
}
</style>